<template>
  <div class="item flex" >
    <div class="checkbox flex">
      <checkButton @click.native="clickCheck"  :is-check="check" />
    </div>
    <div class="item-img">
      <img :src="itemInfo.img" alt="加载图片失败" >
    </div>
    <div class="item-info">
      <p class="title">{{itemInfo.title}}</p>
      <p class="desc">{{itemInfo.desc}}</p>
      <p class="info-other">
        <span class="price left">￥{{itemInfo.price | number()}}</span>
        <span class="right">x{{itemInfo.count}}</span>
      </p>
    </div>
  </div>
</template>

<script>
    import {filters} from "../../../common/mixin";
    import CheckButton from "./CheckButton";

    export default {
        name: "CartListItem",
        components:{
            CheckButton
        },
        mixins:[filters],
        props:{
          itemInfo:{
              type:Object,
              default(){
                  return {}
              }
          }
        },
        computed:{
            //todo 同一组件似乎不能重名
            check(){
                return this.itemInfo.check
            }
        },
        created(){
        },
        methods:{
            clickCheck(){
                //todo 这里应该交个vuex mutations去处理
                this.$store.dispatch('changeOneCheck',this.itemInfo)
                this.isCheck = !this.isCheck
            },
        },

    }
</script>

<style scoped>
  .item{
    border-bottom: 1px solid gray;
    height: 105px;
    padding: 11px 0;
  }
  .checkbox{
    width: 8%;
    align-items:center;
    justify-content:center;
  }
  .item-img{
    width: 25%;
  }
  .item-img img{
    width: 100%;
    vertical-align: middle;
    border-radius: 10%;
    height: 100%;
  }
  .item-info{
    padding: 0 8px;
    width: 67%;
  }
  .title{
    font-size: 14px;
    overflow:hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    white-space:nowrap;
    width: 100%;
  }
  .desc{
    margin: 14px 0 19px 0;
    font-size: 13px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
  }
  .price{
    color: #FF9224;
  }
</style>
